﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/beetlex4axios.js"></script>
    <script src="js/component.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <title>Beetlex samples</title>

</head>
<body>
    <div id="page">
        <page-header> </page-header>
        <div class="container" style="margin-top:110px;">
            <div class="row">
                <ul style="list-style:none;">
                    <li v-for="item in messages" class="message">
                        <h4>
                            <span class="label label-success">[{{item.Room}}]</span>
                            <span class="label label-info">{{item.User.Name}}</span>
                            <span class="label label-default">{{new Date()}}</span>
                        </h4>
                        <div style="padding-left:20px;">
                            {{item.Message}}
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <page-footer :status="loginStatus" @login="onLogin($event)"
                     @talk="onTalk($event)" @select="onSelectRoom($event)" :rooms="getRooms.result">
        </page-footer>
    </div>
    <script>
        beetlex.websocket.receive = function (r) {
            page.messages.push(r);
        };
        beetlex.websocket.disconnect = function () {
            page.loginStatus = false;
        };
        beetlex.useWebsocket();
        var login = new beetlexAction("/Login");
        var getRooms = new beetlexAction('/Rooms', null, []);
        var enterRoom = new beetlexAction('/Enter');
        var talk = new beetlexAction('/Talk');
        login.requested = function (r) {
            page.loginStatus = true;
        };
        var model = {
            getRooms: getRooms,
            loginStatus: false,
            login: login,
            talk: talk,
            enterRoom: enterRoom,
            messages: [],
        };
        var page = new Vue({
            el: '#page',
            data: model,
            methods: {
                onSelectRoom: function (r) {
                    // alert(r);
                    this.enterRoom.post({ room: r });
                },
                onLogin: function (r) {
                    this.login.post({ name: r });
                },
                onTalk: function (msg) {
                    talk.post({ message: msg });
                },
            },
        });
        getRooms.get();
    </script>
</body>

</html>